import React,{useState,useEffect} from "react"
import { Button, Card , Form ,Table , Input ,Modal, message,notification} from 'antd'
import { DeleteOutlined,ExclamationCircleOutlined, PlusOutlined ,SearchOutlined } from '@ant-design/icons'
import { getToken,addKeyFn } from '../../utils/utils'
import axios from 'axios'
function VolunteerList(){
    const [tableData,setTableData] = useState([])
    useEffect(()=>{
        axios.get('/api/queryvol',{
            headers:{
                'Authorization':getToken()
            }
        }).then(res=>{
            const result = JSON.stringify(res.data.results)
            // console.log(result)
            setTableData(addKeyFn(JSON.parse(result)))
            
        })
    },[])
   
 
    const [isShow,setIsShow] = useState(false)
    const [myForm] = Form.useForm()
    const columns = [
        {
            title:'序号',
            key:'key',
            dataIndex:'key',
            render:(key)=>{
                return <b>{key}</b>
            }
        },{
            title:'姓名',
            key:'userName',
            dataIndex:'userName',
            render:(userName)=>{
                return <b>{userName}</b>
            }

        },{
            title:'昵称',
            key:'nickName',
            dataIndex:'nickName',
            render:(nickName)=>{
                return <b>{nickName}</b>
            }
        },{
            title:'头像',
            key:'vol_pic',
            dataIndex:'vol_pic',
            render:(vol_pic)=>{
                return (
                    <img style={{width:"50px",height:'50px'}} src={vol_pic}/>
                )
            }
        }
        ,{
            title: '邮箱',
            key: 'phone_number',
            dataIndex:'email',
            render:(email)=>{
                return <b>{email}</b>
            }
        },{
            title:'个性签名',
            key:'volMotto',
            dataIndex:'volMotto',
            render:(volMotto)=>{
                return <b>{volMotto}</b>
            }
        },{
            title:'志愿时长',
            key:'volTime',
            dataIndex:'volTime',
            render:(volTime)=>{
                return <b>{volTime}</b>
            }
        },
    ]

    return (
        <div>
            <Card title="志愿者列表" >
               
                <Table 
                    dataSource={tableData}
                    columns={columns}
                    pagination={{pageSize:3}} 
                    rowKey={record=>record.userId}
                    >
                </Table>
            </Card>
        </div>
    )
}
export default VolunteerList